<div class="ebike-compare">
    <div class="page-width">
        <h2 class="title">{{ section.settings.title }}</h2>
        <div class="section_text center">{{ section.settings.text }}</div>
        <div class="product-block">
            {%- for block in section.blocks -%}
                <div class="product-block_li">
                    {%- if block.settings.name != blank -%}
                    <div class="name">
                      {{ block.settings.name }}
                    </div>
                  {%- endif -%}
                  {%- if block.settings.des != blank -%}
                  <div class="des">
                    {{ block.settings.des }}
                  </div>
                {%- endif -%}
                    <div class="image-with-text__media image-with-text__media--{{ block.settings.height }} {% if block.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
                    style="padding-bottom: {{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%;">
                        {%- if block.settings.image != blank -%}
                        <img
                            srcset="{%- if block.settings.image.width >= 165 -%}{{ block.settings.image | img_url: '165x' }} 165w,{%- endif -%}
                            {%- if block.settings.image.width >= 323 -%}{{ block.settings.image | img_url: '323x' }} 323w,{%- endif -%}
                            {%- if block.settings.image.width >= 360 -%}{{ block.settings.image | img_url: '360x' }} 360w,{%- endif -%}
                            {%- if block.settings.image.width >= 535 -%}{{ block.settings.image | img_url: '535x' }} 535w,{%- endif -%}
                            {%- if block.settings.image.width >= 750 -%}{{ block.settings.image | img_url: '750x' }} 750w,{%- endif -%}
                            {%- if block.settings.image.width >= 1070 -%}{{ block.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
                            {%- if block.settings.image.width >= 1500 -%}{{ block.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
                            {{ block.settings.image | img_url: 'master' }} {{ block.settings.image.width }}w"
                            data-src="{{ block.settings.image | img_url: '1500x' }}"
                            sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
                            alt="{{ block.settings.image.alt | escape }}"
                            loading="lazy"
                            class="lazyload"
                            width="{{ block.settings.image.width }}"
                            height="{{ block.settings.image.height }}"
                        >
                        {%- else -%}
                        {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                        {%- endif -%}
                    </div>

                    {%- if block.settings.text != blank -%}
                    <div class="text">
                      {{ block.settings.text }}
                    </div>
                  {%- endif -%}
                   
                  {%- assign product = block.settings.product -%}
                  <div class="product-price" id="price-{{ block.id }}" >
                    {%- render 'twy-price', product: product, use_variant: true, show_badges: true, price_class: 'price--large' -%}
                  </div>

            
                  {%- if block.settings.button_label != blank -%}
                    <a{% if block.settings.button_link != blank %} href="{{ block.settings.button_link }}"{% endif %} class="button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link == blank %} aria-disabled="true"{% endif %}>
                    {{ block.settings.button_label | escape }}
                    </a>
                {%- endif -%}

                </div>
            {%- endfor -%}   
        </div>
    </div>
</div>



{% schema %}
    {
      "name": "Ebike compare",
      "tag": "section",
      "class": "spaced-section compare-section",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Title"
        },
        {
          "type": "text",
          "id": "text",
          "label": "Text"
        }
      ],
      "blocks": [
        {
          "type": "image",
          "name": "image",
          "settings": [
            {
            "type": "product",
            "id": "product",
            "label": "product"
            },
            {
            "type": "text",
            "id": "name",
            "label": "name"
            },
            {
            "type": "text",
            "id": "des",
            "label": "des"
            },
            {
              "type": "image_picker",
              "id": "image",
              "label": "Image"
            },
            {
            "type": "text",
            "id": "text",
            "label": "text"
            },
            {
            "type": "text",
            "id": "price_regular",
            "label": "price regular"
          }, {
            "type": "text",
            "id": "price_sale",
            "label": "price sale"
          }, 
            {
            "type": "text",
            "id": "button_label",
            "default": "Button label",
            "label": "Button label"
            }, 
            {
            "type": "url",
            "id": "button_link",
            "label": "Button link"
            }
          ]
        }
      ],
      "presets": [
        {
          "name": "Ebike compare"
        }
      ]
    }
  {% endschema %}

